<template>
  <div class="bestSell">
    <div class="btSell">
      <p>款号</p>
      <el-input v-model="kindsNumberListStr" class="e-inp"></el-input>

      <p>日期</p>
      <el-date-picker
        unlink-panels
        v-model="timeDate"
        type="daterange"
        range-separator="至"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <p>品牌</p>
      <el-select class="e-inp" v-model="brandedName" clearable>
        <el-option
          v-for="item in brandList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <p>品名</p>
      <el-select class="e-inp" v-model="commodityName" clearable>
        <el-option
          v-for="item in nameList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <p>季度</p>
      <el-select class="e-inp" v-model="quarterListStr" multiple collapse-tags>
        <el-option
          v-for="item in quartListStrList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <p>显示</p>
      <el-input v-model="Show" class="e-inp"></el-input>
      <p style="margin-left:0;">名</p>
    </div>

    <div class="btSell_b">
      <div>
        <el-button @click="query" type="primary" icon="el-icon-search"
          >查询</el-button
        >
        <el-button @click="exportExcel" icon="el-icon-upload2">导出</el-button>
        <el-button @click="zoom" icon="el-icon-picture-outline"
          >缩放图片</el-button
        >
        <el-button @click="showscn" icon="el-icon-copy-document"
          >筛选款号</el-button
        >
      </div>
      <div class="chose">
        <el-checkbox
          v-model="colOptions"
          v-for="item in colSelect"
          :label="item"
          :key="item"
          border
          >显示小图</el-checkbox
        >
      </div>
    </div>

    <div>
      <el-table
        border
        ref="tableDataRef"
        id="outTable"
        @row-click="rowClick"
        :data="tabData"
        style="width: 100%"
        height="73vh"
        show-summary
        :summary-method="getList"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '26px' }"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          prop="styleNumber"
          label="款号"
          width="110px"
          v-if="Dis"
        >
        </el-table-column>
        <!-- <el-table-column
        prop="styleNumber"
        label="款号"
        width="110px"
        v-if="Dis1">
      </el-table-column> -->
        <el-table-column prop="colorNo" label="色号" v-if="Dis1">
        </el-table-column>
        <!-- <el-table-column
        prop="XS"
        label="款号色号"
        width="135px"
        v-if="Dis1">
      </el-table-column> -->
        <el-table-column prop="type" label="部类" v-if="Dis2">
        </el-table-column>

        <el-table-column prop="factoryInputNumber" label="厂进">
        </el-table-column>
        <el-table-column prop="customerInputNumber" label="客进">
        </el-table-column>
        <el-table-column prop="customerOutNumber" label="客退">
        </el-table-column>
        <el-table-column prop="customerSellNumber" label="客销">
        </el-table-column>
        <el-table-column prop="customerSellMoney" label="客销金额" width="100">
        </el-table-column>
        <el-table-column prop="customerSellOutNumber" label="销退">
        </el-table-column>
        <el-table-column prop="actualSale" label="实销"> </el-table-column>
        <el-table-column prop="customerRepertoryNumber" label="客存">
        </el-table-column>
        <el-table-column prop="totalRepertoryNumber" label="总存">
        </el-table-column>
        <el-table-column prop="salesRatio" label="销售比"> </el-table-column>
        <el-table-column
          prop="customerFirstInputDate"
          width="120"
          label="首进日"
        >
        </el-table-column>
        <el-table-column
          prop="customerLastInputDate"
          width="120"
          label="近进日"
        >
        </el-table-column>
        <el-table-column prop="firstSellDate" width="120" label="首销日">
        </el-table-column>
        <el-table-column prop="lastSellDate" width="120" label="近销日">
        </el-table-column>
        <el-table-column
          prop="factoryFirstInputDate"
          width="120"
          label="厂首进日"
        >
        </el-table-column>

        <el-table-column
          v-if="btSellList1[0].istrue"
          type="images"
          label="图片"
        >
          <!-- <template>
      <img src="../../../assets/pay/1.png" alt="">
      </template> -->
          <template slot-scope="scope">
            <img :src="scope.row.images" min-width="70" height="70" />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div id="pic" :style="{ display: showpic }">
      <div>
        <p>图片缩放</p>
        <i
          class="el-icon-close"
          @click="
            () => {
              this.showpic = 'none'
            }
          "
        ></i>
      </div>
      <div class="pic1" v-for="u in this.picList" :key="u">
        <template>
          <img :src="u" alt="" class="imgs" style="width:300px;height:356px;" />
        </template>
      </div>
    </div>

    <!-- 筛选框 -->
    <screen-num
      :style="{ display: Scn }"
      @closeScn="closeScn"
      @preservation="preservation"
    >
    </screen-num>

    <!-- 分頁 -->
    <foot-view
      class="footView"
      :pagesNum="pagesNum"
      :hasPagination="true"
      :pageSize="limit"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <div slot="text">
        <el-popover
          placement="top-start"
          width="120"
          max-height="100px"
          trigger="click"
        >
          <el-checkbox-group v-model="selectHeaderList">
            <el-checkbox
              v-for="i in headerList"
              :label="i.value"
              :key="i.value"
              style="margin-bottom:7px"
            ></el-checkbox>
          </el-checkbox-group>
          <i slot="reference" class="el-icon-date"> 表头配置</i>
        </el-popover>
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
import footView from '../../../components/FootView'
import screenNum from '../WarehouseInventory/childComp/screenNum'
import { getBestS } from '../../../network/warehouse'
import today from '../../../components/mixins/today'
import { getBranded } from '../../../network/branded'
import { getProductName } from '../../../network/productName'
import { getQuarter, getNumber } from '../../../network/quarter'
import outex from '../../../components/mixins/outexp'
import enterUp from '../../../components/mixins/enterUp'
export default {
  name: 'best_selling',
  mixins: [today, outex, enterUp],
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    
    this.getCalculationList()
    this.inpList = this.getInput()
    // this.timeDate = [this.getLastWeek(),this.getNowTime()]
    //品牌
    getBranded().then(res => {
      console.log(res)
      res.data.data.forEach(e => {
        this.brandList.push({ value: e.id, label: e.name })
      })
    })
    //品名
    getProductName().then(res => {
      let list = res.data.data
      list.forEach(e => {
        this.nameList.push({ label: e.name, value: e.id })
      })
    })
    //季度
    getQuarter().then(res => {
      console.log(res.data)
      let qList = res.data.data
      qList.forEach(e => {
        this.quartListStrList.push({ label: e.name, value: e.id })
      })
    })
    //款号
    // getNumber(JSON.stringify([''])).then(res => {
    //   console.log(res.data)
    //   if (res.data.code == 200) {
    //     res.data.data.forEach(e => {
    //       this.kindsNumberList.push({value:e.styleNumber,label:e.styleNumber})
    //     })
    //   }
    // })
  },
  components: {
    footView,
    screenNum
  },
  data() {
    return {
      ary: ['部类', '部类编号', '部类id'],
      selectHeaderList: ['款号'],
      headerList: [{ value: '款号' }, { value: '色号' }, { value: '部类' }],
      Dis: true,
      Dis1: false,
      Dis2: false,
      radioValueList: [
        { label: '款号', value: 0 },
        { label: '款号/色号', value: 1 },
        { label: '部类', value: 2 }
      ],
      radioValue: 0,
      jxQuarter: null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))[1],
      kindsNumberList: [],
      allData: [],
      //数据总条数
      dataLen: 0,
      //总页码数
      pagesNum: 0,
      //每页显示条数
      limit: 20,
      // 当前页码
      currentPage: 1,
      tabData: [],
      colOptions: [''], //默认全选
      colSelect: ['图片'],
      inpList: [],
      showpic: 'none',
      Show: '',
      kindsNumberListStr: '',
      timeDate: [],
      brandedName: '',
      commodityName: '',
      quarterListStr: '',
      quartListStrList: [],
      brandList: [],
      nameList: [],
      isShow: false,
      details: [],
      picList: [],
      Scn: 'none',
      checked: false,
      btSellList1: [{ label: '图片', istrue: false }],
      calculationList: [],
      result: [],
      sortArr: []
    }
  },
  watch: {
    //表头设置
    selectHeaderList(a, b) {
      ;[...new Set(this.ary)]
      if (a.indexOf('款号') == -1) {
        this.Dis = false
        if (this.ary.indexOf('款号') == -1) {
          this.ary.push('款号')
        }
      } else {
        this.Dis = true
        this.ary.forEach((e, i) => {
          if (e == '款号') {
            this.ary.splice(i, 1)
          }
        })
      }

      if (a.indexOf('色号') == -1) {
        this.Dis1 = false
        if (
          this.ary.indexOf('色号') == -1 &&
          this.ary.indexOf('颜色编号') == -1
        ) {
          this.ary.push('颜色编号')
        }
      } else {
        this.Dis1 = true
        this.ary.forEach((e, i) => {
          if (e == '颜色编号') {
            this.ary.splice(i, 1)
          }
        })
      }

      if (a.indexOf('部类') == -1) {
        this.Dis2 = false
        // if(this.ary.indexOf('部类') == -1){this.ary.push('部类','部类编号')}
      } else {
        this.Dis2 = true
        // this.ary.forEach((e,i)=>{
        //   if(e == '部类'){this.ary.splice(i,2)}
        // })
      }
      console.log(this.ary)
      this.getCalculationList()
      this.Screen(this.sortArr)
      if (this.result != '') {
        this.tabData = this.result
      } else {
        this.tabData = this.sortArr
      }
    },

    kindsNumberListStr(a, b) {
      if (a != undefined) {
        this.kindsNumberListStr = a
          .toUpperCase()
          .trim()
          .replace(/，/gi, ',') //中文逗号转英文
      }
    },
    colOptions(valArr) {
      var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0) // 未选中
      this.btSellList1.filter(i => {
        if (arr.indexOf(i.label) != -1) {
          i.istrue = false
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout()
          })
        } else {
          i.istrue = true
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout()
          })
        }
      })
    },
    dataLen(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    limit(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    }

    // radioValue(a,b){
    //   console.log(a)
    //   switch(Number(a)) {
    //     case 0:
    //       this.Dis = true
    //       this.Dis1 = false
    //       this.Dis2 = false
    //       this._getBestS()
    //       break;
    //     case 1:
    //       this.Dis = false
    //       this.Dis1 = true
    //       this.Dis2 = false
    //       this._getBestS()
    //       break;
    //     case 2:
    //       this.Dis = false
    //       this.Dis1 = false
    //       this.Dis2 = true
    //       this._getBestS()
    //       break;
    //   }
    // }
  },
  methods: {
    aka(w, q) {
      w.factoryInputNumber =
        Number(q.factoryInputNumber) + Number(w.factoryInputNumber)
      w.customerInputNumber =
        Number(q.customerInputNumber) + Number(w.customerInputNumber)
      w.customerOutNumber =
        Number(q.customerOutNumber) + Number(w.customerOutNumber)
      w.customerSellNumber =
        Number(q.customerSellNumber) + Number(w.customerSellNumber)
      w.customerSellMoney =
        Number(q.customerSellMoney) + Number(w.customerSellMoney)
      w.customerSellOutNumber =
        Number(q.customerSellOutNumber) + Number(w.customerSellOutNumber)
      w.actualSale = Number(q.actualSale) + Number(w.actualSale)
      w.customerRepertoryNumber =
        Number(q.customerRepertoryNumber) + Number(w.customerRepertoryNumber)
      w.totalRepertoryNumber =
        Number(q.totalRepertoryNumber) + Number(w.totalRepertoryNumber)
    },
    //筛选
    Screen(Arr1) {
      let index = this.calculationList.indexOf('styleNumber')
      let index1 = this.calculationList.indexOf('colorNo')
      let index2 = this.calculationList.indexOf('type')

      if (index != -1 && index1 != -1 && index2 != -1) {
        //全选
        this.result = []
        let flag = true
        this.result.push(Arr1[0])
        for (let q = 1; q < Arr1.length; q++) {
          flag = true
          for (let w = 0; w < this.result.length; w++) {
            if (
              Arr1[q].styleNumber == this.result[w].styleNumber &&
              Arr1[q].colorNo == this.result[w].colorNo &&
              Arr1[q].type == this.result[w].type
            ) {
              flag = false
              this.aka(this.result[w], Arr1[q]) //调用共用函数赋值
            }
          }
          if (flag == true) this.result.push(Arr1[q])
        }
        console.log(this.result)
        return
      }

      if (index == -1 && index1 != -1 && index2 != -1) {
        //款号不选
        this.result = []
        let flag = true
        this.result.push(Arr1[0])
        for (let q = 1; q < Arr1.length; q++) {
          flag = true
          for (let w = 0; w < this.result.length; w++) {
            if (
              Arr1[q].type == this.result[w].type &&
              Arr1[q].colorNo == this.result[w].colorNo
            ) {
              flag = false
              this.aka(this.result[w], Arr1[q])
            }
          }
          if (flag == true) this.result.push(Arr1[q])
        }
        console.log(this.result)
        return
      }

      if (index != -1 && index1 == -1 && index2 != -1) {
        //色号不选
        this.result = []
        let flag = true
        this.result.push(Arr1[0])
        for (let q = 1; q < Arr1.length; q++) {
          flag = true
          for (let w = 0; w < this.result.length; w++) {
            if (
              Arr1[q].type == this.result[w].type &&
              Arr1[q].styleNumber == this.result[w].styleNumber
            ) {
              flag = false
              this.aka(this.result[w], Arr1[q])
            }
          }
          if (flag == true) this.result.push(Arr1[q])
        }
        console.log(this.result)
        return
      }

      if (index != -1 && index1 != -1 && index2 == -1) {
        //部类不选
        this.result = []
        let flag = true
        this.result.push(Arr1[0])
        for (let q = 1; q < Arr1.length; q++) {
          flag = true
          for (let w = 0; w < this.result.length; w++) {
            if (
              Arr1[q].colorNo == this.result[w].colorNo &&
              Arr1[q].styleNumber == this.result[w].styleNumber
            ) {
              flag = false
              this.aka(this.result[w], Arr1[q])
            }
          }
          if (flag == true) this.result.push(Arr1[q])
        }
        console.log(this.result)
        return
      }

      if (index != -1 && index1 == -1 && index2 == -1) {
        //只款号
        this.result = []
        let flag = true
        this.result.push(Arr1[0])
        for (let q = 1; q < Arr1.length; q++) {
          flag = true
          for (let w = 0; w < this.result.length; w++) {
            if (Arr1[q].styleNumber == this.result[w].styleNumber) {
              flag = false
              this.aka(this.result[w], Arr1[q]) //调用共用函数赋值
            }
          }
          if (flag == true) this.result.push(Arr1[q])
        }
        console.log(this.result)
        return
      }

      if (index == -1 && index1 != -1 && index2 == -1) {
        //只色号
        this.result = []
        let flag = true
        this.result.push(Arr1[0])
        for (let q = 1; q < Arr1.length; q++) {
          flag = true
          for (let w = 0; w < this.result.length; w++) {
            if (Arr1[q].colorNo == this.result[w].colorNo) {
              flag = false
              this.aka(this.result[w], Arr1[q])
            }
          }
          if (flag == true) this.result.push(Arr1[q])
        }
        console.log(this.result)
        return
      }

      if (index == -1 && index1 == -1 && index2 != -1) {
        //只部类
        this.result = []
        let flag = true
        this.result.push(Arr1[0])
        for (let q = 1; q < Arr1.length; q++) {
          flag = true
          for (let w = 0; w < this.result.length; w++) {
            if (Arr1[q].type == this.result[w].type) {
              flag = false
              this.aka(this.result[w], Arr1[q])
            }
          }
          if (flag == true) this.result.push(Arr1[q])
        }
        console.log(this.result)
        return
      }
    },
    getCalculationList() {
      this.calculationList = JSON.parse(JSON.stringify(this.selectHeaderList)) //实现深克隆 不改变 selectHeaderList的原始值
      for (let y in this.calculationList) {
        if (this.calculationList[y] == '款号') {
          this.calculationList[y] = 'styleNumber'
        }
        if (this.calculationList[y] == '色号') {
          this.calculationList[y] = 'colorNo'
        }
        if (this.calculationList[y] == '部类') {
          this.calculationList[y] = 'type'
        }
      }
      console.log(this.calculationList)
    },
    // querySearch(queryString,cb){
    //   let kindsNumberList = this.kindsNumberList
    //   let results = queryString ? kindsNumberList.filter(this.createFilter(queryString)) : kindsNumberList
    //   cb(results)
    // },
    // createFilter(queryString) {
    //   return (composition) => {
    //     return (composition.value.toLowerCase().indexOf(queryString.toLowerCase()) == 0);
    //   }
    // },
    handleSizeChange(val) {
      //每页多少条
      this.limit = val
      //总页码
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
      this._getBestS()
    },
    handleCurrentChange(val) {
      //当前页
      this.currentPage = val
      this._getBestS()
    },
    zoom() {
      console.log(this.details)
      if (this.details == '') {
        this.$message({
          message: '请选择图片',
          type: 'warning'
        })
        return
      }
      for (let a of this.details) {
        this.pic = a.label
      }
      this.showpic = 'block'
      var oImg = document.getElementsByClassName('imgs')[0]

      function fnWheel(obj, fncc) {
        obj.onmousewheel = fn
        if (obj.addEventListener) {
          obj.addEventListener('DOMMouseScroll', fn, false)
        }

        function fn(ev) {
          var oEvent = ev || window.event
          var down = true

          if (oEvent.detail) {
            down = oEvent.detail > 0
          } else {
            down = oEvent.wheelDelta < 0
          }

          if (fncc) {
            fncc.call(this, down, oEvent)
          }

          if (oEvent.preventDefault) {
            oEvent.preventDefault()
          }

          return false
        }
      }
      fnWheel(oImg, function(down, oEvent) {
        var oldWidth = this.offsetWidth
        var oldHeight = this.offsetHeight
        var oldLeft = this.offsetLeft
        var oldTop = this.offsetTop

        var scaleX = (oEvent.clientX - oldLeft) / oldWidth //比例
        var scaleY = (oEvent.clientY - oldTop) / oldHeight

        if (down) {
          this.style.width = this.offsetWidth * 0.9 + 'px'
          this.style.height = this.offsetHeight * 0.9 + 'px'
        } else {
          this.style.width = this.offsetWidth * 1.1 + 'px'
          this.style.height = this.offsetHeight * 1.1 + 'px'
        }

        var newWidth = this.offsetWidth
        var newHeight = this.offsetHeight

        this.style.left = oldLeft - scaleX * (newWidth - oldWidth) + 'px'
        this.style.top = oldTop - scaleY * (newHeight - oldHeight) + 'px'
      })
    },

    rowClick(e) {
      console.log(e)
      this.details = [e]
      this.picList = [e.images]
      console.log(this.picList)
    },

    exportExcel() {
      let obj = {
        isExport: true,
        'pageData.page': this.currentPage,
        'pageData.limit': this.limit,
        styleNumberListStr:
          this.kindsNumberListStr == '' ? null : this.kindsNumberListStr,
        startTime:
          this.timeDate == null || this.timeDate == ''
            ? ''
            : Number(
                this.timeDate[0].slice(0, 4) +
                  this.timeDate[0].slice(5, 7) +
                  this.timeDate[0].slice(8, 10)
              ),
        endTime:
          this.timeDate == null || this.timeDate == ''
            ? ''
            : Number(
                this.timeDate[1].slice(0, 4) +
                  this.timeDate[1].slice(5, 7) +
                  this.timeDate[1].slice(8, 10)
              ),
        brandedId: this.brandedName,
        commodityNameId: this.commodityName,
        quarterIdList:
          this.quarterListStr == ''
            ? null
            : JSON.stringify(this.quarterListStr).replace(/\[|]/g, ''),
        noExportAnnotateList: JSON.stringify(this.ary)
          .replace(/\[|]/g, '')
          .replace(/\"|"/g, '')
      }
      console.log(obj)
      getBestS(obj).then(res => {
        console.log(res, 'goodsSellingRankingQuery') // getBestS接口路径，api里面的url:被修改过（后端要求）
        var ck = res.data.data
        if (ck == null) {
          this.$message.warning({ message: '导出数据为空', offset: 400 })
          return
        } else {
          console.log(ck)
          location.href = `${ck}`
        }
      })
    },

    preservation(data) {
      console.log(data)
      ;(this.quarterListStr = data[0]),
        (this.kindsNumberListStr = JSON.stringify(data[1])
          .replace(/\[|]/g, '')
          .replace(/\"|"/g, '')), //转数组去中括号//数组去中括号
        console.log(this.quarterListStr, this.kindsNumberListStr)
    },
    query() {
      this._getBestS()
    },

    _getBestS() {
      let obj = {
        isExport: false,
        'pageData.page': this.currentPage,
        'pageData.limit': this.limit,
        styleNumberListStr:
          this.kindsNumberListStr == '' ? null : this.kindsNumberListStr,
        // 按照后端要求，改成时间
        // startTime:this.timeDate == null || this.timeDate == ''? '': Number(this.timeDate[0].slice(0, 4) +this.timeDate[0].slice(5, 7) +this.timeDate[0].slice(8, 10)),
        // endTime:this.timeDate == null || this.timeDate == ''? '': Number(this.timeDate[1].slice(0, 4) +this.timeDate[1].slice(5, 7) +this.timeDate[1].slice(8, 10)),
        startTime:
          this.timeDate == null || this.timeDate == ''
            ? ''
            : this.timeDate[0] + ' ' + '00:00:00',
        endTime:
          this.timeDate == null || this.timeDate == ''
            ? ''
            : this.timeDate[1] + ' ' + '23:59:59',
        brandedId: this.brandedName,
        commodityNameId: this.commodityName,
        quarterIdList:
          this.quarterListStr == ''
            ? null
            : JSON.stringify(this.quarterListStr).replace(/\[|]/g, '')
      }
      console.log(obj)
      getBestS(obj).then(res => {
        console.log(res.data, '点击查询调用的接口') // getBestS接口路径，api里面的url:被修改过（后端要求）
        if (res.data.data == null) {
          this.$message({
            type: 'info',
            message: '未查询到此条件的数据'
          })
          this.tabData = []
        }
        if (res.data.data != null) {
          if (this.Show == '') {
            this.allData = res.data.data
            this.dataLen = res.data.total

            // this.tabData = this.allData.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
            // ------------------------------------------开始 （不能正常结束后端返回来的时间，注释掉能正常显示）---------------------------------------
            // for (let a in res.data.data) {
            //   if (res.data.data[a].customerFirstInputDate == null) {
            //     res.data.data[a].customerFirstInputDate = ''
            //   } else {
            //     res.data.data[a].customerFirstInputDate =
            //       String(res.data.data[a].customerFirstInputDate).slice(0, 4) +
            //       '-' +
            //       String(res.data.data[a].customerFirstInputDate).slice(4, 6) +
            //       '-' +
            //       String(res.data.data[a].customerFirstInputDate).slice(6, 8)
            //   }
            //   if (res.data.data[a].customerLastInputDate == null) {
            //     res.data.data[a].customerLastInputDate = ''
            //   } else {
            //     res.data.data[a].customerLastInputDate =
            //       String(res.data.data[a].customerLastInputDate).slice(0, 4) +
            //       '-' +
            //       String(res.data.data[a].customerLastInputDate).slice(4, 6) +
            //       '-' +
            //       String(res.data.data[a].customerLastInputDate).slice(6, 8)
            //   }
            //   if (res.data.data[a].firstSellDate == null) {
            //     res.data.data[a].firstSellDate = ''
            //   } else {
            //     res.data.data[a].firstSellDate =
            //       String(res.data.data[a].firstSellDate).slice(0, 4) +
            //       '-' +
            //       String(res.data.data[a].firstSellDate).slice(4, 6) +
            //       '-' +
            //       String(res.data.data[a].firstSellDate).slice(6, 8)
            //   }
            //   if (res.data.data[a].lastSellDate == null) {
            //     res.data.data[a].lastSellDate = ''
            //   } else {
            //     res.data.data[a].lastSellDate =
            //       String(res.data.data[a].lastSellDate).slice(0, 4) +
            //       '-' +
            //       String(res.data.data[a].lastSellDate).slice(4, 6) +
            //       '-' +
            //       String(res.data.data[a].lastSellDate).slice(6, 8)
            //   }
            //   if (res.data.data[a].factoryFirstInputDate == null) {
            //     res.data.data[a].factoryFirstInputDate = ''
            //   } else {
            //     res.data.data[a].factoryFirstInputDate =
            //       String(res.data.data[a].factoryFirstInputDate).slice(0, 4) +
            //       '-' +
            //       String(res.data.data[a].factoryFirstInputDate).slice(4, 6) +
            //       '-' +
            //       String(res.data.data[a].factoryFirstInputDate).slice(6, 8)
            //   }
            //   res.data.data[a].salesRatio = res.data.data[a].salesRatio + '%'
            // }
            // ------------------------------------------结束 （（不能正常结束后端返回来的时间，注释掉能正常显示））---------------------------------------
            this.sortArr = res.data.data
            this.Screen(this.sortArr)
            if (this.result != '') {
              this.tabData = this.result
            } else {
              this.tabData = this.sortArr
            }
          } else {
            // this.dataLen = res.data.data.length
            // this.limit = Number(this.Show)
            this.Screen(res.data.data)
            if (this.result != '') {
              this.tabData = this.result.slice(0, this.Show)
            } else {
              this.tabData = res.data.data.slice(0, this.Show)
            }
            // this.tabData = res.data.data.slice(0,this.Show)
            console.log(this.dataLen)
            // this.tabData = this.dataLen.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          }
        }
      })
    },

    closeScn() {
      this.Scn = 'none'
    },
    showscn() {
      this.Scn = 'block'
    },

    //指定列求和
    getList(param) {
      // console.log(this.zt)
      // if(this.zt == 'null'){return}else{
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (
          column.property === 'factoryInputNumber' ||
          column.property === 'customerInputNumber' ||
          column.property === 'customerOutNumber' ||
          column.property === 'customerSellNumber' ||
          column.property === 'customerSellMoney' ||
          column.property === 'customerSellOutNumber' ||
          column.property === 'actualSale' ||
          column.property === 'customerRepertoryNumber' ||
          column.property === 'totalRepertoryNumber'
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = sums[index].toFixed(2)
        }
      })
      return sums
      // }
    }
  },
  mounted() {
    //可拖动
    pic.onmousedown = function(event) {
      let pic = document.getElementById('pic')
      let rex = event.clientX - pic.offsetLeft
      let rey = event.clientY - pic.offsetTop
      document.onmousemove = e => {
        let xX = 0
        let yY = 0
        xX = e.clientX
        yY = e.clientY
        pic.style.left = xX - rex + 'px'
        pic.style.top = yY - rey + 'px'
      }
    }
    document.onmouseup = () => {
      document.onmousemove = null
    }
  }
}
</script>
<style scoped>
.bestSell {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 94.5vh;
  position: relative;
}
.btSell {
  padding: 15px 0;
  display: flex;
  border-bottom: 2px solid #f4f4f4;
}
.btSell p:first-child {
  margin: 2px 6px 0 0;
  display: inline-block;
  white-space: nowrap;
}
.e-inp {
  width: 160px;
}
.btSell p:not(:first-child) {
  margin: 2px 6px 0 12px;
  display: inline-block;
  white-space: nowrap;
}
.btSell_b {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
#pic {
  position: absolute;
  top: 40%;
  left: 40%;
  background: white;
  width: 300px;
  height: 300px;
}
#pic > div:first-child {
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background: #f4f4f4;
}
.pic1 {
  height: 356px;
  text-align: center;
  overflow: hidden;
}
.img {
  width: 100%;
  height: 100%;
}
.chose {
  display: flex;
}
.chose p {
  margin-top: 3px;
}
</style>

<style>
.bestSell .btSell .el-input__inner {
  height: 30px;
}
.bestSell .btSell_b .el-checkbox.is-bordered {
  height: 30px;
  padding: 3px 10px 9px 10px;
}
.bestSell .btSell_b .el-checkbox {
  margin-right: 5px;
}
.bestSell .btSell .el-date-editor .el-range-separator {
  line-height: 23px;
  width: 8%;
}
.bestSell .btSell .el-date-editor .el-range__icon {
  line-height: 24px;
}
.bestSell .btSell .el-date-editor.el-input__inner {
  width: 350px;
}
.bestSell .btSell .el-date-editor .el-range__close-icon {
  line-height: 25px;
}
.bestSell .btSell .el-input__icon {
  line-height: 30px;
}
.bestSell .chose .el-input__inner {
  height: 30px;
}
</style>
